<template>
  <!--  第一种方式 通过父组件传值 -->
  <div>
    <div>我是根组件 myFlag:{{ myFlag }}</div>
    <A @on-click="getFlag"></A>
    <B :flag="myFlag"></B>
  </div>
  <hr />
  <!-- 第二种方式 通过手动写eventBus实现-->
  <div>
    <C></C>
    <D></D>
  </div>
  <hr />
  <!-- 通过第三方库实现 npm i mitt -S
  然后在全局引入并挂载在原型上即可
  import mitt from "mitt";
// const Mitt = mitt()
// declare modele "vue"{
//     export interface componentCustomProperties{
//         $Bus :typeof Mitt
//     }
// }
// app.config.globalPorperties.$Bus = Mitt


组件里面使用如下：
import { getCurrentInstance } from "vue"
const instance = getCurrentInstance()
 const emit =  () => {
    instance?.proxy?.$Bus.emit("on-click","mitt")
 }

 接收组件如下：
 import { getCurrentInstance } from "vue"
const instance = getCurrentInstance()
 instance?.proxy?.$Bus.on("on-click",(params)=>{

 })
-->
</template>

<script lang="ts" setup>
import A from "./a.vue";
import B from "./b.vue";
import C from "./c.vue";
import D from "./d.vue";
import { ref } from "vue";
let myFlag = ref(false);
const getFlag = (params: boolean) => {
  myFlag.value = params;
};
</script>

<style>
</style>